﻿<UserControl 
    Name="TilesPanel"
    x:Class="TilesPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:s="clr-namespace:System;assembly=mscorlib"
             xmlns:local="clr-namespace:WPFZ80MapEditor"
             xmlns:converters="clr-namespace:WPFZ80MapEditor.ValueConverters"
             mc:Ignorable="d" 
             d:DesignHeight="429" d:DesignWidth="165" xmlns:my="clr-namespace:WPFZ80MapEditor">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../ColorsAndStoryboards.xaml" />
            </ResourceDictionary.MergedDictionaries>
            
            <s:Double x:Key="TilesZoomLevel">24.0</s:Double>
            <Color x:Key="InactiveTilesColor">Transparent</Color>
            <local:TileSelectionConverter x:Key="TileSelectionConverter"/>
            <local:AnimatedTileSelectionConverter x:Key="AnimatedTileSelectionConverter"/>
            <converters:TileConverter x:Key="TileConverter"/>
        </ResourceDictionary>
    </UserControl.Resources>
    
    <DockPanel>
        <StackPanel Orientation="Vertical" DockPanel.Dock="Top" Margin="0,5" VerticalAlignment="Top">
            <DockPanel>
                <Label DockPanel.Dock="Left">_Tileset:</Label>
                <ComboBox Name="CurrentTileset" ItemsSource="{Binding Scenario.Tilesets}" DisplayMemberPath="Name" Width="88" Height="23" SelectedItem="{Binding SelectedMap.Tileset, Mode=TwoWay}"/>
                <Button DockPanel.Dock="Right" Content="..." Margin="5,0,0,0" Width="26" Height="23"/>
            </DockPanel>
            <WrapPanel>
                <Label>_Zoom:</Label>
                <Slider Height="25" Name="TileZoomSlider"  Width="97" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" IsSnapToTickEnabled="True" Maximum="32" Minimum="16" SmallChange="1" TickFrequency="4" TickPlacement="TopLeft" LargeChange="8" Value="24.0" IsMoveToPointEnabled="False" />
            </WrapPanel>
        </StackPanel>
        <TabControl x:Name="TileTabs">
            <TabItem Header="Tiles" Name="TilesTab">
                <Border
                BorderBrush="Gray"
                BorderThickness="1">
                    <ListBox x:Name="TilesListBox" ItemsSource="{Binding Path=SelectedItem.Tiles, ElementName=CurrentTileset}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedItem="{Binding SelectedTile, Mode=TwoWay, Converter={StaticResource TileSelectionConverter}}" BorderThickness="0" SelectionMode="Single">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel ItemWidth="{Binding ElementName=TileZoomSlider, Path=Value, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" ItemHeight="{Binding ElementName=TileZoomSlider, Path=Value, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" Margin="4">
                                </WrapPanel>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Image x:Name="TileImage" Source="{Binding Image}" Stretch="Fill" StretchDirection="Both" MouseLeftButtonDown="Tile_Clicked">
                                </Image>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ItemsControl.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <Border x:Name="TileBorder" BorderThickness="2" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="False">
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup Name="SelectionStates">
                                                        <VisualStateGroup.Transitions>
                                                            <VisualTransition GeneratedDuration="0:0:0.1"/>
                                                        </VisualStateGroup.Transitions>
                                                        <VisualState x:Name="Unselected">
                                                            <!--<Storyboard>
                                                                <DoubleAnimation Storyboard.TargetName="TileBorder" Storyboard.TargetProperty="Opacity" To="0.80"/>
                                                            </Storyboard>-->
                                                        </VisualState>
                                                        <VisualState x:Name="Selected">
                                                            <Storyboard>
                                                                <DoubleAnimation Storyboard.TargetName="TileBorder" Storyboard.TargetProperty="BorderBrush.Opacity" To="{StaticResource SelectionOpacity}"/>

                                                                <DoubleAnimation Storyboard.TargetName="TileBorder" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="1.4"/>
                                                                <DoubleAnimation Storyboard.TargetName="TileBorder" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1.4"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                    <VisualStateGroup x:Name="CommonStates">
                                                        <VisualStateGroup.Transitions>
                                                            <VisualTransition GeneratedDuration="0:0:0.25"/>
                                                        </VisualStateGroup.Transitions>
                                                        <VisualState x:Name="Normal" />
                                                        <VisualState x:Name="MouseOver">
                                                            <Storyboard>
                                                                <DoubleAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="BorderBrush.Opacity" To="{StaticResource MouseOverOpacity}"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Disabled"/>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>

                                                <Border.BorderBrush>
                                                    <SolidColorBrush Color="{Binding Color, Source={StaticResource SelectionBrush}}" Opacity="0"/>
                                                </Border.BorderBrush>

                                                <Border.RenderTransform >
                                                    <ScaleTransform x:Name="ScaleTransform" ScaleX="1.0" ScaleY="1.0" CenterX="0.5" CenterY="0.5" />
                                                </Border.RenderTransform>

                                                <Border x:Name="MouseOverBorder" Margin="-2" BorderThickness="2">
                                                    <Border.BorderBrush>
                                                        <SolidColorBrush Color="{Binding Color, Source={StaticResource SelectionBrush}}" Opacity="0"/>
                                                    </Border.BorderBrush>
                                                    <ContentPresenter/>
                                                </Border>
                                            </Border>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                                <Style.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Panel.ZIndex" Value="256"/>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </ItemsControl.ItemContainerStyle>
                    </ListBox>
                </Border>
            </TabItem>
            <TabItem Header="Animated Tiles" Name="AnimatedTilesTab">
                <Grid>
                    <ListBox ItemsSource="{Binding Path=Scenario.AnimDefs.Values}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderThickness="0" SelectedItem="{Binding SelectedTile, Mode=TwoWay, Converter={StaticResource AnimatedTileSelectionConverter}}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel ItemWidth="{Binding ElementName=TileZoomSlider, Path=Value, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" ItemHeight="{Binding ElementName=TileZoomSlider, Path=Value, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" Margin="4"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Image x:Name="TileImage" Stretch="Fill" StretchDirection="Both">
                                    <Image.Source>
                                        <MultiBinding Converter="{StaticResource TileConverter}">
                                            <Binding ElementName="TilesPanel" Path="DataContext.SelectedTileset"/>
                                            <Binding Path="DefaultImage"/>
                                        </MultiBinding>
                                    </Image.Source>
                                </Image>
                                <!--<local:PanelTile Index="{Binding DefaultImage}"
                                                 Margin="2" TileSelected="OnTileSelect" AnimDef="{Binding .}"/>-->
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ListBox>
                </Grid>
            </TabItem>
        </TabControl>
    </DockPanel>
</UserControl>
